<template>
    <div class="list-icon">
        <!-- <router-link :to="'/list'">
            <i class="iconfont icon-cc-list" v-show="listIconShow"></i>
        </router-link> -->
        <div class="link-wrap" @click="onRouteTo('all')">
            <i class="iconfont icon-cc-list" v-show="listIconShow"></i>
        </div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
    name: 'HeaderListIcon',
    props: {
        listIconShow: {
            type: Boolean,
            // default: true
            default() {
                return true;
            }
        }
    },

    methods: {
        ...mapMutations(['selectField']),
        onRouteTo (field) {
            this.selectField(field);
            this.$router.push('./list')
        },
    }
}
</script>

<style lang="scss" scoped>
  .list-icon {
      display: flex;
      width: .44rem;
      height: .44rem;
      justify-content: center;
      align-items: center;
      color: #000;

      .iconfont {
          font-size: .25rem
      }
  }

</style>